<template>
  <div class="sgh-form">
    <section class="form-header">
      <section class="form-title">
        {{ editValFlag ?  "用户新增" : "用户编辑" }}
      </section>
      <section class="close-btn" @click="_close">
        <svg
          t="1608039616302"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="1773"
        >
          <path
            d="M583.168 523.776L958.464 148.48c18.944-18.944 18.944-50.176 0-69.12l-2.048-2.048c-18.944-18.944-50.176-18.944-69.12 0L512 453.12 136.704 77.312c-18.944-18.944-50.176-18.944-69.12 0l-2.048 2.048c-19.456 18.944-19.456 50.176 0 69.12l375.296 375.296L65.536 899.072c-18.944 18.944-18.944 50.176 0 69.12l2.048 2.048c18.944 18.944 50.176 18.944 69.12 0L512 594.944 887.296 970.24c18.944 18.944 50.176 18.944 69.12 0l2.048-2.048c18.944-18.944 18.944-50.176 0-69.12L583.168 523.776z"
            p-id="1774"
          ></path>
        </svg>
      </section>
    </section>
    <p class="sgh-hr"></p>
    <section class="form-body">
      <form @submit="submit" name="sghForm">
        <section class="first-line form-line">
          <Input
            labelVal="登录名"
            name="uname"
            :defaultValue="editVal.uname ? editVal.uname : undefined"
            :isDisable="!editValFlag"
          />
          <Input labelVal="登录密码" name="pwd" type="password" />
        </section>
        <section class="second-line form-line">
          <Input
            labelVal="中文名"
            name="cn"
            :defaultValue="editVal.cn ? editVal.cn : undefined"
          />
        </section>
        <section class="third-line form-line">
          <Select
            placeholder="请选择"
            label="部门名"
            name="department"
            :defaultValue="editVal.dpart ? editVal.dpart : undefined"
            :option="dpart_option"
          />
        </section>
        <section class="fourth-line form-line">
          <MySwitch
            labelValue="状态"
            name="state"
            :switchState="switchState"
            @onClick="setSwitchState"
          />
          <MyRadio
            labelValue="性别"
            name="sex"
            :radioList="[
              { value: 1, label: '男' },
              { value: 2, label: '女' },
            ]"
            :checkValue="editVal.sex ? editVal.sex : undefined"
          />
        </section>
        <section class="fifth-line form-line">
          <Input
            labelVal="电话号码"
            name="phone"
            :defaultValue="editVal.phone ? editVal.phone : undefined"
          />
          <Input
            labelVal="Email"
            name="email"
            :defaultValue="editVal.email ? editVal.email : undefined"
          />
        </section>
        <section class="sixth-line form-line">
          <Input type="submit" val="保存" name="sub" />
        </section>
      </form>
    </section>
  </div>
</template>

<script>
import Input from "@/components/Input/index.vue";
import Select from "@/components/Select/index.vue";
import MySwitch from "@/components/MySwitch/index.vue";
import MyRadio from "@/components/Radio/index.vue";
import { addUser, getDparts, updateUser } from "@/service/home.js";

export default {
  props: ["editVal", "data"],
  components: {
    Input,
    Select,
    MySwitch,
    MyRadio,
  },
  data() {
    return {
      switchState: this.editVal.state || 0,
      dpart_option: [],
      editValFlag: false,
    };
  },
  methods: {
    setSwitchState() {
      this.switchState = !this.switchState;
    },
    _close(){
      this.$emit('close');
    },
    async setDpartOption() {
      this.dpart_option = await getDparts.call(this);
    },
    async submit(event) {
      // 阻止表单提交
      event.preventDefault();
      // 获取所有表单数据
      let params = {
        id: this.editVal.id || -1,
        uname: sghForm.uname.value,
        pwd: sghForm.pwd.value,
        cn: sghForm.cn.value,
        dpart: sghForm.department.value,
        state: this.switchState,
        sex: sghForm.sex.value,
        phone: sghForm.phone.value,
        email: sghForm.email.value,
      };
      try {
        await this.editValFlag
          ? addUser.bind(this)(params)
          : updateUser.bind(this)(params);
        this.$emit('update');
      } catch (error) {
        console.error(error);
      }
      this._close();
    },
    judgeFlag(){
      this.editValFlag = JSON.stringify(this.editVal) == "{}";
    }
  },
  created() {
    this.setDpartOption();
    this.judgeFlag();
  },
  watch: {
    editVal: function (val) {
      this.switchState = val.state;
      this.judgeFlag();
    },
  },
};
</script>

<style lang="scss">
$btn-font-color: #aab8c5;
$theme-green-color: #48aa4e;
$border-gray-color: #474747;
.sgh-form {
  color: $btn-font-color;
  .form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 20px;
    font-size: 12px;
    .close-btn {
      cursor: pointer;
      svg {
        height: 10px;
        width: 10px;
        path {
          fill: $btn-font-color;
        }
      }
    }
  }
  .sgh-hr {
    height: 0.5px;
    background-color: $border-gray-color;
  }
  .form-body {
    margin: 10px 20px;
    font-size: 10px;
    .form-line {
      margin-bottom: 20px;
    }
    .first-line,
    .fifth-line,
    .fourth-line {
      display: flex;
      justify-content: space-between;
      .sgh-input-container {
        width: 50%;
        .sgh-input {
          width: calc(100% - 90px);
        }
      }
      .sgh-switch,
      .sgh-radio {
        width: 50%;
        height: 30px;
        display: flex;
        align-items: center;
      }
    }
    .second-line {
      .sgh-input-container {
        width: 100%;
        .sgh-input {
          width: calc(100% - 90px);
        }
      }
    }
    .third-line {
      .sgh-select {
        width: 100%;
        select {
          width: calc(100% - 78px);
        }
      }
    }
    .sixth-line {
      #sub {
        background-color: $theme-green-color;
        color: #fff;
        margin-left: 70px;
        width: calc(100% - 78px);
        cursor: pointer;
      }
    }
  }
}
</style>